<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh;">
		<loadings v-if="isLoading"></loadings>
		<view class="px-3 py-3 font30">
			<view class="mb-4" v-if="current.type">
				<text class="bg-main colorfff rounded10 px-1 py font26 mr-1" @click="testPop">{{current.type==1?'单选':'判断'}}</text>
				<text class="line-height46">{{current.content}}</text>
			</view>
			<view class="mb-5" v-if="current.type == 1">
				<view class="mb-4" v-if="current.options.A">
					<view class="d-flex d-flex-middle" @click="handlerSelect('A')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('A')==1, 'an-circle-wrong': checkAnswer('A')==2 }">
							<text class="font26">A</text>
						</view>
						<text>{{current.options.A}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.B">
					<view class="d-flex d-flex-middle" @click="handlerSelect('B')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('B')==1, 'an-circle-wrong': checkAnswer('B')==2 }">
							<text class="font26">B</text>
						</view>
						<text>{{current.options.B}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.C">
					<view class="d-flex d-flex-middle" @click="handlerSelect('C')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('C')==1, 'an-circle-wrong': checkAnswer('C')==2 }">
							<text class="font26">C</text>
						</view>
						<text>{{current.options.C}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.D" @click="handlerSelect('D')">
					<view class="d-flex d-flex-middle">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('D')==1, 'an-circle-wrong': checkAnswer('D')==2 }">
							<text class="font26">D</text>
						</view>
						<text>{{current.options.D}}</text>
					</view>
				</view>
			</view>
			<view class="mb-5" v-else>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('对')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('对')==1, 'an-circle-wrong': checkAnswer('对')==2 }">
							<text class="font26">A</text>
						</view>
						<text>对</text>
					</view>
				</view>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('错')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('错')==1, 'an-circle-wrong': checkAnswer('错')==2 }">
							<text class="font26">B</text>
						</view>
						<text>错</text>
					</view>
				</view>
			</view>
			<view class="p-1" v-if="records[active].user_answer != ''">
				<view class="d-flex d-flex-middle">
					<view class="d-flex d-flex-middle mr-5">
						<text class="mr-2 font26">正确答案</text>
						<text class="colorsuccess font30">{{list[active].answer}}</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="mr-2 font26">您选择</text>
						<text class="font30 colorf00">{{records[active].user_answer}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="records[active].user_answer && list[active].explanation">
			<view class="bg-f2f2f2" style="height: 12rpx;"></view>
			<view class="d-flex d-flex-middle d-flex-center py-2"><text>试题详解</text></view>
			<view class="px-3 pb-3">
				<view class="font26 line-height40 color999">
					{{list[active].explanation}}
				</view>
			</view>
		</view>
		<view class="fix-card left-0 right-0 bottom-0">
			<view class="px-3 d-flex d-flex-middle d-flex-between">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center mr-3" @click="favClick">
					<text class="iconfont font32" :class="isFav?'icon-shoucang-copy coloryellow':'icon-shoucangxingxing color666'"></text>
					<text class="font22 color666" >收藏</text>
				</view>
				
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="popNote">
					<text class="iconfont icon-xinxi font32 color666"></text>
					<text class="font22 color666" >笔记</text>
				</view>
				<view class="d-flex-item d-flex-center d-flex d-flex-middle">
					<view class="step" @click="preStep">
						<text class="font24" :class="active>0?'color666':'colorhold'">上一题</text>
					</view>
					<view class="d-flex d-flex-center d-flex-middle mx-5">
						<text class="font26">{{active+1}}/{{list.length}}</text>
					</view>
					<view class="step" @click="nextStep">
						<text class="font24" :class="active < list.length-1 ?'color666':'colorhold'">下一题</text>
					</view>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="openCard">
					<text class="iconfont icon-datiqia color999 font32"></text>
					<text class="font22 color666">答题卡</text>
				</view>
			</view>
		</view>
		
		<uni-popup ref="cardPopup" @touchmove.stop.prevent="moveHandle" type="bottom" style="position: relative;z-index: 999991;">
			<view class="wrap">
				<view class="py-3 d-flex d-flex-between d-flex-middle mb-2">
					<view class="pl-3" style="width: 120rpx;">{{active+1}}/{{list.length}}</view>
					<text class="font30 color000">答题卡</text>
					<view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;"><text class="iconfont icon-cuo font30 color999" @click="closeCard"></text></view>
				</view>
				<!-- <view class="d-flex d-flex-center d-flex-middle mb-4">
					<text class="iconfont icon-cuo1 mr-1 colorf00"></text><text class="mr-5">{{checkNum[1]}}</text>
					<text class="iconfont icon-dui1 mr-1 colorsuccess"></text><text>{{checkNum[0]}}</text>
				</view> -->
				<view class="pb-4">
					<scroll-view scroll-y style="height: 700rpx;" :scroll-top="scroll_top" scroll-with-animation>
						<view class="px-3 d-flex d-flex-wrap">
							<view class="span-4 d-flex d-flex-center mb-2" v-for="(an,anindex) in records" :key="an.id">
								<view class="an-circle position-relative" :class="{ 'an-circle-correct': isAnCorrect(anindex,an.user_answer)==1, 'an-circle-wrong': isAnCorrect(anindex,an.user_answer)==2 }" @click="setQuestion(anindex)">
									<text>{{anindex+1}}</text>
									<view class="d-flex d-flex-center d-flex-middle an-circle-curr" v-if="active == anindex">当前</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="d-flex d-flex-center pb-3">
					<view class="d-flex d-flex-middle d-flex-center rounded60 mr-3" style="width: 300rpx;height: 70rpx;border: 1px solid #FFA18C;" @click="rewrite"><text class="colorred">重做答卷</text></view>
					<view class="border-main d-flex d-flex-middle d-flex-center rounded60" style="width: 300rpx;height: 70rpx;" @click="goResult"><text class="main-color">提交答卷</text></view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="note" type="bottom" :safe-area='false'>
			<view class="popup-wrap">
				<view class="popup-hd">
					<text>添加笔记</text>
					<view class="popup-close d-flex d-flex-middle" @click.stop="closeNote()">
						<text class="iconfont icon-cuo font30 colorhold"></text>
					</view>
				</view>
				<view class="p-2 mb-3">
					<textarea v-model="note" placeholder="点击添加笔记" placeholder-class="colorhold" style="width: 100%;height: 200rpx;"></textarea>
				</view>
				<view class="p-2">
					<view class="bg-main d-flex d-flex-middle d-flex-center rounded15 py-2" @click="saveNode">
						<text class="colorfff">保存</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tipsPopup" type="center" :maskClick="false" :mask-background-color="'rgba(0,0,0,0.3)'" style="position: relative;z-index: 999997;">
			<view class="tips-popup">
				<view class="tips-logo-box d-flex d-flex-center">
					<image src="https://wfgtest-1631.oss.wefanbot.com/zc_app/aiImg/ic_ar.png" style="width: 248rpx;height: 160rpx;"></image>
				</view>
				<view class="tips-content">
					<view class="d-flex d-flex-center mb-3">
						<text class="font-bold font30">辛苦了，答题完成！</text>
					</view>
					<view class="d-flex d-flex-center d-flex-middle mb-3">
						<text>合格率：</text><text class="colorsuccess font32 font-bold">{{rate}}%</text>
					</view>
					<view class="d-flex d-flex-center d-flex-middle mb-3">
						<text>总题数：</text><text class="color000 font-bold mr-3">{{records.length}}</text>
						<text>答错：</text><text class="colorf00 font-bold mr-3">{{errorNum}}</text>
						<text>答对：</text><text class="colorsuccess font-bold">{{correctNum}}</text>
					</view>
					<view style="height: 20rpx;"></view>
					<view class="d-flex d-flex-center" @click="overSure">
						<view class="tips-btn py-1 rounded30 d-flex d-flex-center">
							<text>确定</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { userApi } from "@/http/userApi"
	import store from '@/store/index.js'
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				isLoading:true,
				scroll_top: 0,
				active:0,
				disabled:false,
				status:1,
				chapter:0,
				totalDuration:7200,
				isFav:false,
				timer:null,
				current:{},
				note:'',
				currentAnswer:{},
				records:[
					{
						question_id:'',
						user_answer:''
					}
				],
				list:[],
				correctNum:0,
				errorNum:0,
				rate:0
			}
		},
		onLoad(e) {
			if(e && e.chapter){
				this.chapter = e.chapter
				this.getChapterTiList(this.chapter)
				uni.setNavigationBarTitle({
					title: '章节练习'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '随机练习'
				});
				this.getTiList()
			}
		},
		computed:{
			...mapState({
				loginState: state => state.loginState,
				cid: state => state.cid
			}),
			checkAnswer(){
				return function(answ){
					if(this.records[this.active].user_answer == ''){
						return 0
					}
					if(this.records[this.active].user_answer == answ){
						if(this.list[this.active].answer == answ){
							return 1
						}else{
							return 2
						}
					}
				}
			},
			isAnCorrect(){
				return function(index,answ){
					if(answ == ''){
						return 0
					}
					if(this.list[index].answer == answ){
						return 1
					}else{
						return 2
					}
				}
			},
		},
		watch:{
			active(newActive,oldActive){
				this.current = this.list[newActive]
				this.getFavInfo(this.current.id)
			}
		},
		methods: {
			//获取随机题目
			getTiList(){
				let that = this
				userApi.getRandomTopic(that.cid).then((res)=>{
					that.isLoading = false
					that.list = res.questions
					that.current = that.list[0]
					that.records = res.questions.map(item=>({'question_id':item.id,'user_answer':''}))
					that.getFavInfo(that.current.id)
				}).catch((e)=>{
					that.isLoading = false
					console.log('e',e)
				})
			},
			//获取章节题库
			getChapterTiList(cid){
				let that = this
				userApi.getDailyList(cid).then((res)=>{
					that.isLoading = false
					that.list = res.questions
					that.current = that.list[0]
					that.records = res.questions.map(item=>({'question_id':item.id,'user_answer':''}))
					that.getFavInfo(that.current.id)
				}).catch((e)=>{
					that.isLoading = false
				})
			},
			//获取题目，是否收藏
			getFavInfo(qid){
				let that = this
				userApi.getSingleQuestion(qid).then((res)=>{
					that.isFav = res.is_favorite
				})
			},
			//选择答案
			handlerSelect(ans){
				let that = this
				if(that.records[that.active].user_answer == ''){
					that.records[that.active].user_answer = ans
				}
			},
			async goResult(){
				let that = this
				let unWriteNum = that.records.filter(item=>item.user_answer == '').length
				let cntStr = unWriteNum?`还有${unWriteNum}题没有做答，确定提交？`:'确定提交考试答案？'
				uni.showModal({
					'title': '提示',
					'content': cntStr,
					success: (res) => {
						if (res.confirm) {
							that.saveAnswer()
						}
					}
				})
			},
			saveAnswer(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				const answerType = that.chapter == 0?'2':'1'
				userApi.saveAnswers({'records':that.records,'answer_type':answerType}).then((res)=>{
					uni.hideLoading()
					that.$refs.cardPopup.close()
					that.showResult()

				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			rewrite(){
				this.records = this.list.map(item=>({'question_id':item.id,'user_answer':''}))
				this.active = 0
			},
			//保存笔记
			saveNode(){
				let that = this
				if(that.note == ''){
					return uni.showToast({
						title:'请输入笔记内容',
						icon:'none'
					})
				}
				const param = {
					'question_id':that.current.id,
					'content':that.note
				}
				uni.showLoading({
					title:'操作中...',
					mask:true
				})
				userApi.saveNote(param).then((res)=>{
					that.note = ''
					uni.hideLoading()
					uni.showToast({
						title:'笔记保存成功！'
					})
					setTimeout(()=>{
						that.$refs.note.close()
					},1000)
					console.log('')
				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			favClick(){
				let that = this
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				const param = {
					'question_id':that.current.id,
					'source_type':that.chapter?'daily':'random'
				}
				userApi.favQuestion(param).then((res)=>{
					console.log('fav-res',res)
					uni.hideLoading()
					that.isFav = !that.isFav
				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			preStep(){
				if (this.active > 0) {
				    this.active--
				}
			},
			nextStep(){
				if (this.active < this.list.length - 1) {
				    this.active++
				}else{
					uni.showToast({
						title:'没有更多试题了！',
						icon:'none'
					})
				}
			},
			openCard(){
				this.$refs.cardPopup.open()
			},
			closeCard(){
				this.$refs.cardPopup.close()
			},
			setQuestion(index){
				this.active = index
				this.$refs.cardPopup.close()
			},
			moveHandle() {
				return false
			},
			popNote(){
				this.$refs.note.open()
			},
			closeNote(){
				this.$refs.note.close()
			},
			testPop(){
				this.$refs.tipsPopup.open('center')
			},
			showResult(){
				let that = this
				let correctNum = 0
				that.records.forEach((item,index) => {
					if(that.list[index].answer == item.user_answer){
						correctNum++
					}
				})
				that.correctNum = correctNum
				that.errorNum = that.records.length - correctNum
				that.rate = ((correctNum/that.records.length)*100).toFixed(2)
				that.$refs.tipsPopup.open('center')
			},
			overSure(){
				this.$refs.tipsPopup.close()
				uni.reLaunch({
					url:'/pages/exams/exams'
				})
			}
		}
	}
</script>

<style scoped>
.answer-option{
	width: 56rpx;
	height: 56rpx;
	border-radius: 56rpx;
	background-color: #fff;
	border: solid 1px #f9f9f9;
}
.correct-option{
	background-color: #3dc092;
	border-color: #3dc092;
	color: #ffffff;
}
.error-option{
	background-color: #f5615e;
	border-color: #f5615e;
	color: #ffffff;
}
.fix-card{
	padding-top: 15rpx;
	padding-bottom: 50rpx;
	position: fixed;
	border-top: solid 1px #ebebeb;
	background-color: #f5f5f7;
}
.step{
	border: solid 1px #ddd;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}
.an-circle{
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 80rpx;
	border: solid 1px #dddddd;
	overflow: hidden;
}
.an-circle-curr{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rpx;
	background-color: rgba(0,0,0,.6);
	font-size: 18rpx;
	color:#fff
}
.an-circle-correct{
	background-color: #3dc092;
	color: #fff;
	border-color: #3dc092;
}
.an-circle-wrong{
	background-color: #f5615e;
	color: #fff;
	border-color: #f5615e;
}
.popup-wrap{
	width:750rpx;
	background-color: #FFFFFF;
	border-radius:25rpx 25rpx 0 0;
	min-height: 500rpx;
}
.popup-hd{
	background-color: #f5f5f5;
	border-radius:25rpx 25rpx 0 0;
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
	text-align: center;
	font-size: 24rpx;
}
.popup-close{
	position: absolute;
	height: 80rpx;
	top: 0;
	right: 20rpx;
}
</style>
